<template>
    <div>
      <!-- 商品列表 -->
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 内容区 -->
      <el-card>
        <!-- 搜索框 -->
        <el-input placeholder="请输入内容" v-model="goodsName" class="input-with-select">
         <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <el-button type="primary" style="margin-left:20px" @click="addGoods">添加商品</el-button>
        <el-button type="primary" style="margin-left:20px" @click="openBook">book</el-button>
        <!-- 列表 -->
        <el-table
            :data="goodsdata"
            border
            style="width: 100%;margin-top:20px">
            <el-table-column type="expand" class="column">
              <template slot-scope="scope">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品名称">
                    <span>{{scope.row.goods_name}}</span>
                  </el-form-item>
                  <el-form-item label="价格">
                    <span>{{scope.row.goods_price}}</span>
                  </el-form-item>
                  <el-form-item label="库存">
                    <span>{{scope.row.goods_number}}</span>
                  </el-form-item>
                  <el-form-item label="重量">
                    <span>{{scope.row.goods_weight}}</span>
                  </el-form-item>
                  <el-form-item label="商品状态">
                    <span v-if = 'scope.row.is_promote'>已审核</span>
                    <span v-else>未审核</span>
                  </el-form-item>
                  <el-form-item label="添加时间">
                    <span>{{scope.row.add_time | dateFormat}}</span>
                  </el-form-item>
                  <el-form-item label="更新时间">
                    <span>{{scope.row.upd_time | dateFormat}}</span>
                  </el-form-item>
                  <el-form-item label="是否是热销品">
                    <span>{{scope.row.hot_mumber}}</span>
                  </el-form-item>
                  <el-form-item label="热销品数量">
                    <span>{{scope.row.hot_mumber}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="商品名称" prop="goods_name" min-width="400"></el-table-column>
            <el-table-column label="商品价格（元）" prop="goods_price" min-width="122"></el-table-column>
            <el-table-column label="商品重量（kg）" prop="goods_weight" min-width="122"></el-table-column>
            <el-table-column label="创建时间" prop="upd_time" min-width="122">
              <template slot-scope="scope">
                {{scope.row.upd_time | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-search" size ='small' @click="modGpoods(scope.row)">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" size ='small' @click="deGoods(scope.row)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!-- 修改对话框 -->
        <el-dialog
          title="修改商品信息"
          :visible.sync="modVisible"
          width="50%">
          <el-form :model="modgoodsForm" :rules="modgoodsrules" ref="modgoodsRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="modgoodsForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="modgoodsForm.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="modgoodsForm.goods_number" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="modgoodsForm.goods_weight" type="number"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="modVisible = false">取 消</el-button>
            <el-button type="primary" @click="suremodGoods">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
import {getFile} from '@/components/api.js'
export default {
    data() {
        return {
          goodsquery:{
            query:'',
            pagenum:1,
            pagesize:5
          },
          goodsName:'',
          goodsdata:[],
          total:0,
          modVisible:false,
          imgUrl:'',
          modgoodsForm:{
            goods_name:'',
            goods_price:'',
            goods_number:'',
            goods_weight:''
          },
          modgoodsrules:{
            goods_name:[
              { required: true, message: '请输入商品名称', trigger: 'blur' },
                ] ,
            goods_price:[
              { required: true, message: '请输入商品价格', trigger: 'blur' },
                ] ,
            goods_number:[
              { required: true, message: '请输入商品数量', trigger: 'blur' },
                ] ,
            goods_weight:[
              { required: true, message: '请输入商品重量', trigger: 'blur' },
                ] ,
            
          },
          goodsId:''
            
        };
    },
    computed:{
      
    },
    created() {

    },
    mounted() {
      this.gogoodslist()
    },
    methods: {
      async gogoodslist(){
        const {data:res} =await this.$http.get('goods',{params:this.goodsquery})
        console.log(res);
        if(res.meta.status =! 200) return this.$message.error('获取商品列表失败')
        this.goodsdata = res.data.goods
        this.total = res.data.total
      },
      openBook(){
        this.$router.push('/book')
      },
      getFile(){
        console.log(getFile)
        getFile().then(res=>{
          console.log(res)
          let blob = new Blob([res.data],{type:'image/png'})
          console.log(blob)
          this.imgUrl = window.URL.createObjectURL(blob)
        })
      },
      //搜索商品
      search(){
        this.goodsquery.query = this.goodsName
        this.gogoodslist()
      },
      //添加商品
      addGoods(){
        this.$router.push('/GoodsList/AddGoods')
      },
      //修改商品
      modGpoods(row){
        this.modVisible = true
        console.log(row);
        this.modgoodsForm.goods_name = row.goods_name
        this.modgoodsForm.goods_price = row.goods_price
        this.modgoodsForm.goods_number = row.goods_number
        this.modgoodsForm.goods_weight = row.goods_weight
        this.goodsId = row.goods_id

      },
      //确定修改
      suremodGoods(){
        this.$refs.modgoodsRef.validate(async vaild =>{
          if(!vaild) return
          const {data:res} = await this.$http.put(
            `goods/${this.goodsId}`,this.modgoodsForm)
            console.log(res);
        })
      },
      //删除商品
      deGoods(row){
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const {data:res} = await this.$http.delete(`goods/${row.goods_id}`)
          console.log(res);
          if(res.meta.status ==! 200) return this.$message.error('删除商品失败')
          this.$message.success('删除商品成功')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //分页功能
      handleSizeChange(val) {//每页获取条数
        this.goodsquery.pagesize =val;
        this.gogoodslist()
      },
      handleCurrentChange(val) {
        this.goodsquery.pagenum =val
        this.gogoodslist()
      }
    }
};
</script>

<style scoped>
.el-card{
  margin-top: 20px;
}
.input-with-select{
  width: 400px;
}
.el-form-item {
display: block;
color: #333;
}
.demo-table-expand {
    font-size: 0;
  }
 .demo-table-expand label {
    width: 200px;
    color: #99a9bf;
    margin-right: 40px;
  }
.demo-table-expand .el-form-item {
    margin-right:0;
    margin-bottom: 0;
    width: 100%;
  }
.el-pagination{
  margin-top: 20px;
}

</style>
